<!-- 公司概况 -->
<template>
  <div class="company">
    <!-- 公司资料 -->
    <yn-com-comTitle name="公司资料"></yn-com-comTitle>
    <yn-about-companyInfo :data="profile"></yn-about-companyInfo>
    <!-- 发行相关 -->
    <yn-com-comTitle class="mt15" name="发行相关"></yn-com-comTitle>
    <ul class="table w1021" v-if="JSON.stringify(listInfo) != '{}'">
      <li class="tableTrCompany flex">
        <span class="tableName gray w170">成立日期</span>
        <span class="tableTxt orange">{{ listInfo.buildDate }}</span>
        <span class="tableName gray w170">发行后摊薄市盈率</span>
        <span class="tableTxt orange">{{ listInfo.pe | filterVal }}</span>
      </li>
      <li class="tableTrCompany flex">
        <span class="tableName gray w170">上市日期</span>
        <span class="tableTxt orange">{{ listInfo.listDate }}</span>
        <span class="tableName gray w170">每股面值（元）</span>
        <span class="tableTxt orange">{{ listInfo.bookVal | filterVal }}</span>
      </li>
      <li class="tableTrCompany flex">
        <span class="tableName gray w170">发行方式</span>
        <span class="tableTxt orange">{{ listInfo.issCls | filterVal }}</span>
        <span class="tableName gray w170">发行总股数（万股）</span>
        <span class="tableTxt orange">{{
          listInfo.ttlShr | filterVal("numberNo")
        }}</span>
      </li>
      <li class="tableTrCompany flex">
        <span class="tableName gray w170">
          实际募集
          <br />资金净额（万元）
        </span>
        <span class="tableTxt orange high">{{
          listInfo.netCap | filterVal("numberNo")
        }}</span>
        <span class="tableName gray w170">发行价格（元）</span>
        <span class="tableTxt orange high">{{
          listInfo.issPrc | filterVal
        }}</span>
      </li>
      <li class="tableTrCompany flex">
        <span class="tableName gray w170">
          网上公众
          <br />投资者中签率（％）
        </span>
        <span class="tableTxt orange high">{{
          listInfo.onlLotRate | filterVal
        }}</span>
        <span class="tableName gray w170">发行费用（万元）</span>
        <span class="tableTxt orange high">{{
          listInfo.free | filterVal("numberNo")
        }}</span>
      </li>
      <li class="tableTrCompany flex">
        <span class="tableName gray w170">网下有效申购配售比例</span>
        <span class="tableTxt orange">{{
          listInfo.oflLotRate | filterVal
        }}</span>
        <span class="tableName gray w170">保荐人</span>
        <span class="tableTxt orange">{{ listInfo.sponsor | filterVal }}</span>
      </li>
    </ul>
    <div class="tableNone orange w1021" v-else>暂无数据</div>
    <!-- 证监会行业变动 -->
    <yn-com-comTitle class="mt15" name="证监会行业变动"></yn-com-comTitle>
    <yn-about-companyList class="zjsw" :data="zj"></yn-about-companyList>
    <!-- 申万行业变动 -->
    <yn-com-comTitle class="mt15" name="申万行业变动"></yn-com-comTitle>
    <yn-about-companyList class="zjsw" :data="sw"></yn-about-companyList>
  </div>
</template>

<script>
import { profile, number, numberNo } from "../script/api";
import { mapState } from "vuex";

const handle = (obj) => {
  obj._briefIntro =
    obj.briefIntro.length > 500
      ? obj.briefIntro.substring(0, 500) + "..."
      : obj.briefIntro;
  return obj;
};
export default {
  data() {
    return {
      profile: {}, //公司概况
      listInfo: {}, //发行相关
      sw: [], //审万
      zj: [], //证监会行业变动
    };
  },
  filters: {
    filterVal(ops, num) {
      if (ops && num == "numberNo") {
        return numberNo(ops, num);
      }
      if (typeof ops == "number") {
        return number(ops, num);
      }
      return ops ? ops : "--";
    },
  },
  components: {},
  computed: {
    ...mapState(["stock"]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await profile();
      this.profile = handle(res.profile);
      this.stock.stockName = res.profile.stockName;
      window._stockName = res.profile.stockName;
      this.listInfo = res.listInfo;
      this.sw = res.sw;
      this.zj = res.zj;
    },
  },
};
</script>
<style lang="scss" scoped></style>
